<template>
  <div>
    <van-nav-bar
      title="修改昵称"
      left-text="关闭"
      right-text="确定"
      @click-left="$emit('close')"
      @click-right="onClickRight"
    />

    <div style="padding: 10px">
      <van-field
        v-model="message"
        rows="2"
        autosize
        type="textarea"
        maxlength="7"
        placeholder="请输入昵称"
        show-word-limit
      />
    </div>
  </div>
</template>

<script>
import { updateUserProfile } from '@/api/user.js'
export default {
  data() {
    return {
      message: '',
    }
  },
  props: ['name'],
  methods: {
    // 点击确定
    async onClickRight() {
      this.$toast.loading({
        message: '努力加载中....', //2
        duration: 0,
      })

      try {
        //1.
        await updateUserProfile({
          name: this.message,
        })
        //2
        this.$toast.success('更新昵称成功')
        //3.
        this.$emit('close')
        //4.
        this.$emit('update:name', this.message)
      } catch (error) {
        this.$toast.fail('更新昵称失败')
      }
    },
  },
  created() {
    this.message = this.name
  },
}
</script>

<style></style>
